<template>


  <div class="box">
    <div class="top">
       <div class="center">
                          <!-- 标签 -->


                            <ModelTitle>
                              <template>
                                角色管理
                              </template>
                            </ModelTitle>

                              <div class="ceshi3">
                                <el-button  :plain="true" @click="open" style="background-color: #2984F8"><font style="color:white">保存</font> </el-button>
                              </div>
  
  
                          <!-- 时间搜索框 -->
                          <div class="zhanwei">

                            <el-tabs style="width:1110px;" v-model="activeName" @tab-click="handleClick">

                              
                              
                                <div class="buttom1" >
                                  <div class="neirong11" >

                                    <div style="width: 300px;height: 60px;border-bottom: 2px solid #F1F1F1;line-height: 60px;">

                                      <div style="margin-left:20px;float: left;">
                                        角色
                                      </div>

                                      <div style="float: right;margin-right: 20px;">
                                        <el-button type="text" @click="dialogFormVisible = true">+新增角色</el-button>
                                      </div>

                                    </div>


                                    <div style="height: 400px;width: 595px;">
                                      <el-row class="tac">
                                        <el-col :span="12">
                                          <el-menu
                                            default-active="2"
                                            class="el-menu-vertical-demo"
                                            @open="handleOpen"
>

                                            <el-menu-item index="1" class="hov">
                                              <span slot="title">系统管理员</span>
                                            </el-menu-item>

                                            <el-menu-item index="2">
                                              <span slot="title">全科医师</span>
                                            </el-menu-item>

                                            <el-menu-item index="3">
                                              <span slot="title">全科护士</span>
                                            </el-menu-item>

                                            <el-menu-item index="4">
                                              <span slot="title">护理医师</span>
                                            </el-menu-item>
                                          </el-menu>
                                        </el-col>
                                      </el-row>
                                    </div>

                                  </div>
                                  <div class="neirong22">
                                    <div style="width: 745px;height: 60px;border-bottom: 2px solid #F1F1F1;line-height: 60px;margin-left: 20px;">

                                      <div >
                                        管理角色权限
                                      </div>

                                    </div>


                                    <div style="margin-left: 20px;height: 400px;width: 745px;">
                                    
                                    
                                      <div style="margin-top:20px;">
                                        
                                        <!-- 复选框 1 -->
                                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                                        <div style="margin: 15px 0;"></div>

                                        <el-checkbox :indeterminate="isIndeterminate" v-model="checkOne" @change="handleCheckAllChange">签约管理</el-checkbox>
                                        <div style="margin: 15px 0;"></div>
                                        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                                          <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
                                        </el-checkbox-group>


                                      </div>
                                    
                                    </div>

                                  </div>

                                </div>  
                             
                                <!-- 新增框 -->
                                <el-dialog title="编辑角色信息" :visible.sync="dialogFormVisible" width="400px">

                                    <el-form :model="form">
                                      <el-form-item  label="角色名称" :label-width="formLabelWidth">
                                        <el-input   v-model="form.name" autocomplete="on" >
                                        </el-input>
                                      </el-form-item>

                                      <el-form-item label="角色介绍" :label-width="formLabelWidth">
                                        <el-input v-model="form.name" autocomplete="off">
                                        </el-input>
                                      </el-form-item>

                                      <el-form-item label="创建时间" :label-width="formLabelWidth">
                                        2021年09月28日 10:13
                                      </el-form-item>

                                      <el-form-item label="创建人" :label-width="formLabelWidth">
                                        王丽心
                                      </el-form-item>
                                    </el-form>

                                    <div slot="footer" class="dialog-footer">
                                      <el-button @click="dialogFormVisible = false">取 消</el-button>
                                      <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
                                    </div>

                                </el-dialog>


                              
                                <div class="buttom2">

                                </div> 
                            



                                <div class="buttom3">

                                </div>  
                            </el-tabs>
                    
                          </div>




      </div>
    </div>
  </div>
  
  </template>
  
  <script>
  const cityOptions = ['查看待处理签约', '编辑待处理签约', '删除待处理签约', '导出待处理签约'];
  import ModelTitle from '@/components/ModelTitle.vue';
  export default {
    data() {
      return {
        activeName: 'first',
        dialogFormVisible: false,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '80px',
        multipleSelection: [],

        // 复选框
        checkOne:false,

        checkAll: false,
        checkedCities: [],
        cities: cityOptions,
        isIndeterminate: false
      };

      
    },
    components: { ModelTitle },
    // 复选框


    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },

      //全部勾选
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      //全部勾选后 出现勾选效果
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.checkOne = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },

      //保存提醒框
      open() {
        this.$message({
          message: ' 保存成功',
          type: 'success',
          center: true,
          iconClass:'el-icon-success'
        });
      },
    }
  };
</script>
  
  <style>
          *{
              margin: 0;
              padding: 0;
          }
          body{ 
              background: #F2F7FA;
          }
          .box{
              width: 1150px;
              height: 1112px;
              margin: 20px auto;
              background: rgb(192, 192, 192);
              position: relative;
          }
  
          .center{
              background-color: rgba(255, 255, 255, 1);
              width: 1150px;
              height: 1112px;
          }
          
          .ceshi3{
              width: 100px;
              height: 20px;
              margin-left: 10px;
              float: right;
              margin-top: 30px;
          }
  
          .zhanwei{
              width: 1150px;
              height: 40px;
              float: left;
              margin-top: 50px;
              margin-left: 20px;
          }

          
          .buttom1{
            width: 1150px;
              float: left;
          }



          .buttom2{
            width: 1150px;
              float: left;
          }

          .buttom3{
            width: 1150px;
              float: left;
          }

          .neirong11{
            width: 300px;
            height: 737px;
            float: left;
            text-align: 50px;
            border: 2px solid #F1F1F1;
          }
          .neirong22{
            width: 785px;
            height: 737px;
            float: left;
            border: 2px solid #F1F1F1;
            margin-left: 10px;
          }
  </style>
  